<script setup>
import { ElMessage } from 'element-plus'
import { handleCommand } from "./utils.js";
import { ArrowDown } from '@element-plus/icons-vue'
import { computed, defineProps } from "vue";
const { meta, vm } = defineProps(["meta", "vm"]);
const childs = computed(() => {
  let children = meta.children || [];
  return children;
});

function handleItemClick(meta) {
  handleCommand(vm, meta);
}

</script>
<template>
  <el-dropdown type="default" @command="handleItemClick">
    <el-button>
      {{ meta.title }}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in childs" :command="item">
          {{ item.title }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>